<div class="bg">
    <div class="passport" style="z-index: 2">
        <div class="name">
            <img src="./assets/images/login/logo.png" width="60" height="60">温湿度远程监控系统
        </div>
        <div class="leftimg">
            <!-- <img src="./assets/images/login/hb.png" style="z-index: 99"> -->
        </div>
        <div class="rightcont">
            <div class="login-wrap">
                <div class="login-box">欢&nbsp;迎&nbsp;登&nbsp;录</div>
                <div class="log">
                    <form nz-form [formGroup]="userForm" (ngSubmit)="submit(userForm.value)">
                        <nz-form-item>
                            <nz-form-control [nzErrorTip]="errorUserTpl">
                                <nz-input-group [nzPrefix]="userNameTemplate">
                                    <input nz-input formControlName="username" placeholder="请输入帐号">
                                </nz-input-group>
                                <ng-template #errorUserTpl let-control>
                                    <ng-container *ngIf="control.hasError('briefConfirm')">
                                        <span style="color: bisque;">
                                            请输入用户名
                                        </span>
                                    </ng-container>
                                </ng-template>
                            </nz-form-control>
                        </nz-form-item>

                        <nz-form-item>
                            <nz-form-control [nzErrorTip]="errorPwdTpl">
                                <nz-input-group [nzPrefix]="userPwdTemplate">
                                    <input nz-input type="password" formControlName="password" placeholder="请输入密码">
                                    <ng-template #errorPwdTpl let-control>
                                        <ng-container *ngIf="control.hasError('briefConfirm')">
                                            <span style="color: rgb(240, 191, 31);">
                                                请输入密码
                                            </span>
                                        </ng-container>
                                    </ng-template>
                                </nz-input-group>

                            </nz-form-control>
                        </nz-form-item>

                        <div class="jigsaw-Containner" #JigsawContainer></div>
                        <!-- <nz-form-item class="jigsaw">
                            <nz-form-control>
                                <div #sliderContainer class="sliderContainer" (mouseover)="mouseover()">
                                    <div #sliderMask class="sliderMask">
                                        <div #slider class="slider">
                                            <span class="sliderIcon"></span>
                                        </div>
                                    </div>
                                    <span class="sliderText">向 右 滑 动 验 证</span>
                                </div>
                            </nz-form-control>
                        </nz-form-item> -->
                        <nz-form-item class="login" nz-row>
                            <button nz-button [nzLoading]="loading" (click)="setLoading()" class="btn">登 录</button>
                        </nz-form-item>
                    </form>
                    <p class="register" (click)="register()"><i>注册</i></p>
                </div>
                <p class="tex">本系统支持谷歌、360等浏览器</p>
            </div>
            <ng-template #userNameTemplate><i nz-icon type="user"></i></ng-template>
            <ng-template #userPwdTemplate><i nz-icon type="lock"></i></ng-template>
        </div>
        <div class="clear"></div>
    </div>
</div>
